<template>
  <a-dropdown>
    <a-button type="text">
      {{ value }}
      <down-outlined style="color: #929292" />
    </a-button>
    <template #overlay>
      <a-menu @click="onClick">
        <a-menu-item key="fit"> 适应窗口大小 </a-menu-item>
        <a-menu-item :key="0.25"> 25% </a-menu-item>
        <a-menu-item :key="0.5"> 50% </a-menu-item>
        <a-menu-item :key="0.75"> 75% </a-menu-item>
        <a-menu-item :key="1"> 100% </a-menu-item>
        <a-menu-item :key="1.25"> 125% </a-menu-item>
        <a-menu-item :key="1.5"> 150% </a-menu-item>
        <a-menu-item :key="2"> 200% </a-menu-item>
        <a-menu-item :key="3"> 300% </a-menu-item>
        <a-menu-item :key="4"> 400% </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import { useVModel } from '@vueuse/core'
import { CanvasEvent } from '@antv/g6'
// import { useVueFlow } from '@vue-flow/core'
/**
 * 外部参数
 */
let props = defineProps({
  zoom: { type: Number, default: 1 },
  graph: { required: true },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:zoom'])
/**
 * 双向绑定
 */
let zoom = useVModel(props, 'zoom', emit)
/**
 * 图
 */
// let { setViewport, getViewport, fitView } = useVueFlow()
function onClick({ key }) {
  if (typeof key === 'number') {
    props?.graph?.zoomTo?.(key)
    zoom.value = key
  } else {
    props?.graph?.fitView?.()
    setTimeout(() => {
      zoom.value = props?.graph?.getZoom?.()
      console.log(zoom.value)
    }, 500)
  }
}
function wheelCallback() {
  zoom.value = props.graph.getZoom()
}
watch(
  () => props.graph,
  (g, old) => {
    if (g) {
      g?.on?.(CanvasEvent.WHEEL, wheelCallback)
    }
    if (old) {
      old?.off?.(CanvasEvent.WHEEL, wheelCallback)
    }
  },
)
onUnmounted(() => {
  props?.graph?.off?.(CanvasEvent.WHEEL, wheelCallback)
})
let value = computed(() => {
  return parseInt(zoom.value * 100) + '%'
})
</script>
<style lang="less" scoped></style>
